<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

   <div id="app"></div>
   <script src="../js/react.development.js"></script>
   <script src="../js/react-dom.development.js"></script>
   <script src="../js/babel.min.js"></script>


    <script type="text/babel">
    //  需求调研 - 需求分析 - 产品原型 - 保真图（设计）
    //  技术组长 - 技术分析 - （前台 / 后台 / app / 后端 /  数据...）
        //         -  任务分解 - 具体模块 （头像 / 评论人 / 内容 /日期）
        // 程序员 - 静态页面 （html css js特效）- react 大组件（注：html-jsx）
        // - 抽离组件（组件分析-最小细粒度的组件=>复用）-组件组合（组件树） - 获取数据 （接口-状态数据）-数据同步渲染到组件上

        // react 大组件 : （注：html-jsx）
         function Comment(props){
            return (
                <div className='comment'>
                    {/*用户信息 */}
                    <div className="UserInfo">
                        <img 
                        style={{with:150,height:150}}
                        src="https://img2.baidu.com/it/u=3745548308,3899350255&fm=26&fmt=auto&gp=0.jpg"
                        alt="girl"
                        />
                        {/*评论人*/}
                        <div className="UserInfo-name">
                        zhangsan
                        </div>
                    </div>

                    {/*评论内容 */}
                    <div className="Comment-text">
                    comment content
                    </div>

                    {/*评论日期 */}
                    <div className="Comment-date">
                        2021-08-02
                    </div>
                </div>
            )
        }
        

        // reat 组件抽离
        function Avatar(props){
            const imgURl= props.imgURl
            return (
                <img 
                    style={{with:150,height:150}}
                    src={imgURl}
                    alt="girl"
                    />
            )
        }

        function User(props){
            const name = props.name
            return (
                <div className="UserInfo-name">
                {name}
                </div>
            )
        }

        function Content(props){
            const content=props.content
            return (
                <div className="Comment-text">
                {content}
                </div>
            )
        }

      


        // 组件组合
        function Comment(props){
            return (
                <div className='comment'>
                    {/*用户信息 */}
                    <div className="UserInfo">
                        {/*头像*/}
                        <Avatar></Avatar>
                        {/*评论人*/}
                        <User></User>
                    </div>

                    {/*评论内容 */}
                    <Content></Content>

                    {/*评论日期 */}
                    <div className="Comment-date">
                        2021-08-02
                    </div>
                </div>
            )
        }

        // 数据渲染到组件
        function Comment(props){
            const {user,content,date} = props.data
            return (
                <div className='comment'>
                    {/*用户信息 */}
                    <div className="UserInfo">
                        {/*头像*/}
                        <Avatar imgURl={user.avatar}></Avatar>
                        {/*评论人*/}
                        <User name={user.name}></User>
                    </div>

                    {/*评论内容 */}
                    <Content content={content}></Content>

                    {/*评论日期 */}
                    <div className="Comment-date">
                        {date}
                    </div>
                </div>
            )
        }

          // 接口数据=> 状态数据
          var data = {
            user: {
                name: 'jack',
                avatar: "https://img2.baidu.com/it/u=3745548308,3899350255&fm=26&fmt=auto&gp=0.jpg"
            },
            content: 'aaa bbb cccc',
            date: '2022-03-24'
        }

        // const e = <Comment data={data} />

        ReactDOM.render(<Comment data={data}/>,document.getElementById('app'))

        //  UI组件/ 简单组件 ---class组件 / 复杂组件
    </script>
</body>
</html>